@TAGBOX_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE: 25px;

.dx-tagbox:not(.dx-texteditor-empty) {
    &.dx-show-clear-button .dx-icon-clear {
        position: absolute;
        top: 50%;
        margin-top: -@CLEAR_ICON_SIZE/2;
        right: auto;
    }
}

.dx-dropdowneditor-button-visible .dx-tag-container {
    padding-right: @DROPDOWNEDITOR_BUTTON_WIDTH;
}

.dx-show-clear-button {
    .dx-tag-container {
        padding-right: @CLEAR_ICON_SIZE + @CLEAR_ICON_RIGHT;
    }

    &.dx-dropdowneditor-button-visible .dx-tag-container {
            padding-right: @DROPDOWNEDITOR_BUTTON_WIDTH + @CLEAR_ICON_SIZE + @CLEAR_ICON_RIGHT;
    }
}

.dx-tag-container {
    background: #fff;
}

.dx-tagbox-single-line {
    .dx-texteditor-container();

    .dx-tag-container {
        border: none;
    }

    &.dx-tagbox-only-select {
        .dx-texteditor-input {
            padding-left: 0;
        }
    }

    &.dx-dropdowneditor-button-visible {
        .dx-texteditor-container {
            width: calc(~"100% - "@TAGBOX_DROPDOWNEDITOR_CONTAINER_BUTTON_SIZE);
        }
    }
}

.dx-tag-content {
    min-width: 40px;
    margin-top: 2px;
    margin-left: 2px;
    padding: 4px 19px 4px 7px;
    color: #fff;
    font-size: 1em;
    background-color: @IOS7_TAGBOX_TAG_ITEM_BACKGROUND_COLOR;
    .border-radius(10px);
}

.dx-tag-remove-button {
    padding: 7px 5px;
    width: 24px;
    height: 24px;

    &:before, &:after {
        left: 12px;
        margin-top: -5px;
        width: 2px;
        height: 12px;
        background: #fff;
    }

    &:after {
        left: 7px;
        margin-top: 0;
        width: 12px;
        height: 2px;
    }

    .dx-hairlines & {
        top: 2px;
    }

    &:active {
        &:before, &:after {
            background: lighten(@IOS7_TAGBOX_TAG_ITEM_BACKGROUND_COLOR, 25%);
        }
    }
}

.dx-tag.dx-state-focused {
    .dx-tag-content {
        background: @IOS7_TAGBOX_TAG_FOCUSED_BACKGROUND;
    }
}

.dx-tagbox-popup-wrapper {
    .dx-list-select-all:after {
        margin-left: 0;
    }
}

.dx-rtl {
    &.dx-tagbox.dx-show-clear-button .dx-icon-clear {
        left: auto;
        right: auto;
    }

    .dx-tag-content {
        padding-right: 7px;
        padding-left: 19px;
    }

    .dx-tag-remove-button {
        &:before {
            right: 12px;
            left: auto;
        }

        &:after {
            right: 7px;
            left: auto;
        }
    }

    &.dx-dropdowneditor-button-visible .dx-tag-container {
        padding-right: 0;
        padding-left: @DROPDOWNEDITOR_BUTTON_WIDTH;
    }

    &.dx-show-clear-button {
        .dx-tag-container {
            padding-right: 0;
            padding-left: @CLEAR_ICON_SIZE + @CLEAR_ICON_RIGHT;
        }

        &.dx-dropdowneditor-button-visible .dx-tag-container {
            padding-right: 0;
            padding-left: @DROPDOWNEDITOR_BUTTON_WIDTH + @CLEAR_ICON_SIZE + @CLEAR_ICON_RIGHT;
        }
        padding-left: @CLEAR_ICON_SIZE + @CLEAR_ICON_RIGHT;
    }

    &.dx-show-clear-button, &.dx-dropdowneditor-button-visible, &.dx-show-clear-button.dx-dropdowneditor-button-visible {
        .dx-texteditor-input {
            padding-left: 0;
            padding-right: 0;
        }
    }
}
